<template>
  <!-- ... 省略其他部分 ... -->
  <div class="home">
<!--    <NavBar /> &lt;!&ndash; 引入导航栏组件 &ndash;&gt;-->



    <!-- 轮播图部分 -->
    <el-carousel indicator-position="outside" height="300px" class="custom-carousel" @change="handleCarouselChange">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item" alt="轮播图" class="carousel-image">
        <div class="carousel-caption">
          {{ captions[index] }}
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 轮播图部分 -->

    <!-- 直播专区标题和更多按钮 -->
    <div class="live-section">
      <div class="live-title">直播专区</div>
      <button class="more-button" @click="handleMoreClick('直播')">更多> </button>
    </div>

    <!-- 汉堡卡片部分 -->
    <el-row class="live-row" :gutter="45">
      <el-col :span="6" v-for="(image, index) in 3" :key="index" class="live-col">
        <el-card :body-style="{ padding: '0px' }" class="live-card">
          <img :src="liveImages[index]" class="live-image">
          <div style="padding: 14px;">
            <span>{{ liveTitles[index] }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">回放</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 活动专区标题和更多按钮 -->
    <div class="live-section">
      <div class="live-title">活动专区</div>
      <button class="more-button" @click="handleMoreClick('活动')">更多> </button>
    </div>

    <!-- 汉堡卡片部分 -->
    <el-row class="live-row" :gutter="45">
      <el-col :span="6" v-for="(image, index) in 3" :key="index" class="live-col">
        <el-card :body-style="{ padding: '0px' }" class="live-card">
          <img :src="activeImages[index]" class="live-image">
          <div style="padding: 14px;">
            <span>{{ activeTitles[index] }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">立即参与</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 活动专区下方的两列内容 -->
    <el-row class="additional-row" >
      <el-col :span="6">
        <img :src="additionalImages[0]" class="additional-image">
      </el-col>
      <el-col :span="18">
        <!-- 第二列的内容，可以是文本或其他元素 -->
        <div class="additional-content">
          <!-- 导航菜单开始 -->
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">全部</el-menu-item>
            <el-menu-item index="2">德育</el-menu-item>
            <el-menu-item index="2">课程教学</el-menu-item>
            <el-menu-item index="2">体育</el-menu-item>
            <el-menu-item index="2">美育</el-menu-item>
            <el-menu-item index="2">课后服务</el-menu-item>
            <el-menu-item index="2">教师研修</el-menu-item>
            <el-menu-item index="2">家庭教育</el-menu-item>
          </el-menu>
          <!-- 导航菜单结束 -->
        </div>
      </el-col>
    </el-row>

    <!-- 热门推荐标题和更多按钮 -->
    <div class="live-section">
      <div class="live-title">热门推荐</div>
      <button class="more-button" @click="handleMoreClick('热门推荐')">更多> </button>
    </div>

    <!-- 热门推荐卡片部分 -->
    <el-row class="hot-recommend-row" gutter="20">
      <el-col :span="8" v-for="(card, index) in cards" :key="index" class="hot-recommend-col">
        <!-- 卡片，设置背景颜色为粉红色 -->
        <el-card class="box-card pink-background">
          <div slot="header" class="clearfix">
            <div class="title-with-image">
              <span :class="{'large-title': index < 3}">{{ card.title }}</span>
              <img v-if="index < 3" class="title-image" :src="titleImages[index]" alt="Title Image">
            </div>
          </div>
          <!-- 列表内容区域，设置背景颜色为白色 -->
          <div class="card-content white-background">
            <div v-for="o in card.items" :key="o" class="text item">
              {{o }}
            </div>
            <div class="more-buttons-container">
              <el-button class="more-buttons" type="text" @click="goToDetail(card.link)">查看更多</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门榜单标题 -->
    <div class="live-section ranking-section">
      <div class="live-title">热门榜单</div>
      <!-- 添加日榜和总榜导航按钮 -->
      <div class="ranking-nav">
        <button class="ranking-button" @click="switchList('daily')">日榜</button>
        <button class="ranking-button" @click="switchList('total')">总榜</button>
      </div>
    </div>

    <!-- 新增的卡片类型轮播图 -->
    <el-carousel
        type="card"
        height="250px"
        class="new-carousel"
        indicator-position="outside"
        @change="handleCarouselChange"
    >
      <el-carousel-item v-for="(item, index) in 7" :key="index">
        <div class="carousel-item-container">
          <img v-if="index === 0" src="https://basic.smartedu.cn/img/sedu-default.a79bffbf.png" class="carousel-item-image" alt="Item Image">
          <img v-else-if="index === 1" src="https://basic.smartedu.cn/img/course-default.f8214543.png" class="carousel-item-image" alt="Item Image">
          <img v-else-if="index === 2" src="https://basic.smartedu.cn/img/sport-default.1f894980.png" class="carousel-item-image" alt="Item Image">
          <img v-else-if="index === 3" src="https://basic.smartedu.cn/img/art-default.4e8f64c1.png" class="carousel-item-image" alt="Item Image">
          <img v-else-if="index === 4" src="https://basic.smartedu.cn/img/labourEdu-default.7bdf3424.png" class="carousel-item-image" alt="Item Image">
          <img v-else-if="index === 5" src="https://basic.smartedu.cn/img/schoolService-default.ffd8329a.png" class="carousel-item-image" alt="Item Image">
          <img v-else src="https://basic.smartedu.cn/img/tchMaterial-default.79489de5.png" class="carousel-item-image" alt="Item Image">
          <ul class="infinite-list">
            <li v-for="(listItem, listItemIndex) in currentListData" :key="`list-item-${listItemIndex}`" class="list-item">
              {{ listItem }}
            </li>
          </ul>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 底部内容 -->
    <div class="live-section">
      <div class="live-title">底部</div>
      <button class="more-button" @click="handleMoreClick('底部')"> </button>
    </div>
    <!-- ... 省略其他部分 ... -->
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import { ElCarousel, ElCarouselItem, ElRow, ElCol, ElCard, ElButton, ElMenu, ElMenuItem } from 'element-plus';

export default {
  name: 'Recommendation',
  components: {
    NavBar,
    ElCarousel,
    ElCarouselItem,
    ElRow,
    ElCol,
    ElCard,
    ElButton,
    ElMenu,
    ElMenuItem,
  },
  data() {
    return {
      images: [
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1733448944442.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732866635883.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732851272844.jpg',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732851132773.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1731929706728.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1731929729774.jpg',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1731929808487.jpg',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1731929782940.jpg',
      ],
      captions: [
        '中小学生学习情况问卷',
        '同上一堂好课',
        '实验教学精品课资源推荐',
        '强国新征程 教育谱新篇',
        '中小学规范汉字书写教育相关资源推荐',
        '外语类教材及配套听力材料',
        '体育与健康教材及配套数字演示资源',
        '庆祝新中国成立75周年 弘扬爱国主义精神',
        '《义务教育信息科技教学指南》及配套课件',
      ],
      currentDate: new Date(),
      activeIndex: '1',
      activeIndex2: '1',
      liveImages: [
        'https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%9B%B4%E6%92%AD%E5%BA%95%E5%9B%BE1080x608_1726889873974.jpg?x-eos-process=image/format,webp/resize,m_lfit,w_360',
        'https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E6%B0%94%E5%80%99%E5%8F%98%E5%8C%96%E4%B8%8E%E6%88%91%E4%BB%AC%E7%9A%84%E4%B8%96%E7%95%8C_1721009122221_1724729688357.png?x-eos-process=image/format,webp/resize,m_lfit,w_360',
        'https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E4%B8%AD%E5%9B%BD%E6%A3%AE%E6%9E%97%E7%9A%84%E4%B8%BB%E8%A6%81%E7%B1%BB%E5%9E%8B%E3%80%81%E5%88%86%E5%B8%83%E5%8F%8A%E4%BF%9D%E8%82%B2_1721009095893_1724729805128.png?x-eos-process=image/format,webp/resize,m_lfit,w_360',
      ],
      liveTitles: [
        '2024年《国防公开课》',
        '气候变化与我们的世界',
        '中国森林的主要类型、分布及保育',
      ],
      activeImages: [
        'https://api.ykt.cbern.com.cn/zxx/res/study/dsfxhd.png',
        'https://api.ykt.cbern.com.cn/zxx/res/study/xkkcjpklx_2024.png',
        'https://api.ykt.cbern.com.cn/zxx/res/study/syjxjpklx_2024.png',
      ],
      activeTitles: [
        '中小学读书分享活动',
        '学科课程精品课遴选',
        '实验教学精品课遴选',
      ],
      additionalImages: [
        'https://basic.smartedu.cn/img/banner.dff1168a.png',
      ],
      // ... 省略其他数据属性 ...
      cards: [
        {
          title: '学习新思想 做好接班人',
          items: ["列表项1", "列表项2", "列表项3"],
          link: "/moral"
        },
        {
          title: '同上一堂好课',
          items: ["人民教育出版社", "西南大学出版社", "山东科学技术出版社"],
          link: "/recommended/bestCourses"
        },
        {
          title: '劳动教育',
          items: ["列表项1", "列表项2", "列表项3"],
          link:"/labor"
        }
      ],

      titleImages: [
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732542071096.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732866976780.png',
        'https://s-file-1.ykt.cbern.com.cn/auxo_channel_api/imgs/89d9f2e6-d046-426a-920b-0e459f7822aa/1732542190517.png',
      ],

      listData: Array.from({ length: 100 }, (_, index) => `列表项 ${index + 1}`),

      dailyListData: Array.from({ length: 100 }, (_, index) => `日榜列表项 ${index + 1}`),
      totalListData: Array.from({ length: 100 }, (_, index) => `总榜列表项 ${index + 1}`),
      currentListData: [],
      currentListType: 'daily', // 'daily' or 'total'
    };
  },
  methods: {
    logout() {
      // 登出逻辑
      this.userStore.clear();
      this.$router.push('/login');
    },
    handleMoreClick(sectionTitle) {
      // 更多按钮点击事件处理
      console.log('More clicked for:', sectionTitle);
    },
    handleCarouselChange(index) {
      this.activeIndex = index;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    switchList(type) {
      if (type === 'daily') {
        this.currentListData = this.dailyListData;
        this.currentListType = 'daily';
      } else if (type === 'total') {
        this.currentListData = this.totalListData;
        this.currentListType = 'total';
      }
    },
    loadMoreItems() {
      if (this.loadedItems < this.currentListData.length) {
        this.loadedItems += 10;
      }
    },

  goToDetail (path) {
      this.$router.push(path);
  },
    goToBestCourses(){
      this.$router.push({name: 'BestCourses'});
    }
  },
  mounted() {
    // 默认加载日榜图片
    this.currentListData = this.dailyListData;
  }
};
</script>

<style scoped>
/* 全局样式 */
.home {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #346af3;
  color: white;
  padding: 10px 20px;
}

.logo img {
  width: 100px; /* 根据实际图片大小调整 */
}

.user-info {
  display: flex;
  align-items: center;
}

.logout-button {
  background-color: #f44336; /* 红色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  padding: 5px 10px; /* 内边距 */
  cursor: pointer; /* 指针样式 */
  border-radius: 3px; /* 圆角 */
}

.logout-button:hover {
  background-color: #d32f2f; /* 鼠标悬浮时的背景颜色 */
}

/* 轮播图样式 */
.custom-carousel {
  width: 90%; /* 调整轮播图为页面宽度的90% */
  margin: 20px auto; /* 上下边距为20px，水平居中 */
  overflow: hidden;
  border-radius: 10px; /* 轮播图圆角 */
}

.carousel-image {
  width: 100%; /* 图片宽度占满整个轮播图项的宽度 */
  height: 100%; /* 图片高度占满整个轮播图项的高度 */
  object-fit: fill; /* 保持图片比例，完全覆盖轮播图项 */
  border-radius: 10px; /* 图片圆角 */
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  color: white;
  text-align: center;
  padding: 10px 0;
  border-radius: 0 0 10px 10px; /* 底部圆角 */
}

/* 直播专区样式 */
.live-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f2f2f2; /* 背景颜色 */
  margin-bottom: 20px; /* 与下方汉堡卡片的间距 */
  margin-top: 20px;
}

.live-title {
  font-size: 30px; /* 字体大小 */
  color: #346af3; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
}

/* 更多按钮样式 */
.more-button {
  color: dodgerblue; /* 白色文字 */
  border: none; /* 无边框 */
  padding: 5px 10px; /* 内边距 */
  cursor: pointer; /* 指针样式 */
  border-radius: 3px; /* 圆角 */
}

.more-button:hover {
  background-color: #d32f2f; /* 鼠标悬浮时的背景颜色 */
}

/* 汉堡卡片图片样式 */
.live-image {
  width: 100%;
  height: 120px; /* 调整图片高度 */
  object-fit: fill; /* 保持图片比例 */
}

.live-card {
  height: 200px; /* 调整卡片高度 */

}

/* 直播专区行样式 */
.live-row {
  display: flex;
  justify-content: center;
}

/* 直播专区列样式 */
.live-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 附加内容图片样式 */
.additional-image {
  width: 70%; /* 调整图片宽度为100% */
  height: auto; /* 保持图片原始宽高比 */
  object-fit: cover; /* 如果需要，可以覆盖整个区域 */
  margin-left: 20%; /* 左边距为20% */
  margin-top: 30px;
}

/* 附加内容区域样式 */
.additional-content {
  padding: 14px;
  margin-top: 20px;
}

/* 导航菜单样式 */
.el-menu-demo {
  margin-bottom: 20px;
}

/* 导航菜单项样式 */
.el-menu-demo .el-menu-item {
  font-size: 16px; /* 字体大小 */
  padding: 10px 20px; /* 内边距 */
}

/* 导航菜单项hover样式 */
.el-menu-demo .el-menu-item:hover {
  background-color: #f0f0f0; /* 鼠标悬浮时的背景颜色 */
}

/* 热门推荐行样式 */
.hot-recommend-row {
  margin-bottom: 20px; /* 卡片底部间距 */
}

/* 热门推荐列样式 */
.hot-recommend-col{
  margin-bottom: 20px; /* 卡片底部间距 */
}

/* 卡片标题栏样式 */
.text {
  font-size: 18px;
  margin-left: 10px;

}

.item {
  margin-bottom: 35px;
  line-height: 70px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 450px;
  margin-left: 50px;
  margin-bottom: 20px;
}

/* 标题和图片容器样式 */
.title-with-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 大标题样式 */
.large-title {
  font-size: 20px;
  font-weight: bold;
}

/* 查看更多样式 */
.more-buttons {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  border: none;
  background-color: transparent;
  color: #409eff;
  padding-bottom: 1px;
}

.more-buttons-container {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.hot-recommend-col:last-child {
  margin-right: 0;
}

.title-image {
  heigth: 20px;
  margin-left: 10px;
  width: 60%;
}

.box-card.pink-background {
  background-color: #ff7b923b !important; /* 使用 !important 确保样式被应用 */
}

/* 列表内容区域白色背景样式 */
.white-background {
  background-color: white;
  border-radius: 10px;
}

/* 新增日榜和总榜导航按钮样式 */
.ranking-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f2f2f2; /* 背景颜色 */
  margin-bottom: 20px; /* 与下方汉堡卡片的间距 */
  margin-top: 20px;
}

.ranking-nav {
  flex-grow: 1;
  text-align: left ;
  padding-left: 20px;
}

.ranking-button {
  margin-left: 10px;
  padding: 5px 15px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.ranking-button:hover {
  background-color: #337ab7;
}

.new-carousel .el-carousel__item h3 {
  color: #fff;
  text-align: center;
  margin: 0;
  line-height: 250px; /* 根据新的轮播图高度调整 */
  background-color: #409eff; /* 轮播图背景颜色 */
}


/* 新增的无限滚动列表样式 */
.infinite-list-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-carousel {
  justify-content: center; /* 水平居中 */
  max-width: 1000px; /* 设置轮播图的最大宽度 */
  height: 250px; /* 轮播图高度 */
  margin: 20px auto; /* 上下边距为20px，水平居中 */
  border-radius: 10px; /* 轮播图圆角 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

.carousel-item-container {
  width: 100%; /* 轮播图容器宽度为100% */
  height: 100%; /* 高度为100%，确保填满轮播项 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 子项垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.carousel-item-image {
  max-width: 50%; /* 图片最大宽度不超过容器宽度 */
  max-height: 100%; /* 图片最大高度不超过容器高度 */
  object-fit: contain; /* 图片适应容器，保持比例 */
}

/* 新增的无限滚动列表样式 */
.infinite-list-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infinite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-y: auto; /* 添加滚动条 */
  height: 100%; /* 确保列表充满整个轮播项 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-item {
  padding: 8px 0;
  text-align: center;
  font-size: 18px; /* 增大字体大小 */
}

/* 自定义滚动条样式 */
.infinite-list::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.infinite-list::-webkit-scrollbar-thumb {
  background-color: #cccccc; /* 滚动条颜色 */
  border-radius: 3px; /* 滚动条圆角 */
}

.infinite-list::-webkit-scrollbar-track {
  background-color: transparent; /* 滚动条轨道颜色 */
}

/* 将滚动条位置向左移动，通过增加左边距 */
.infinite-list {
  padding-left: 1px; /* 根据滚动条宽度调整 */
}
/* ... 省略其他样式 ... */
</style>